<template>
  <div class="login">
    <div class="header"></div>
    <div class="main">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import axios from "../../util/axios";
import { useRouter } from "vue-router";
export default {
  setup() {
    const username = ref("");
    const password = ref("");
    const router = useRouter();
    const onSubmit = () => {
      axios
        .post("/login", {
          userName: username.value,
          passWord: password.value,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 1) {
            sessionStorage.setItem("token", res.data.data.token);
            router.push("/home");
          }
        });
    };

    return {
      username,
      password,
      onSubmit,
    };
  },
};
</script>

<style scoped lang='scss'>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: 50px;
    background: skyblue;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .main {
    flex: 1;
    overflow: scroll;
  }
}
</style>